import React, { useEffect, useState } from 'react';
import { Swiper, Image } from 'antd-mobile';
import { bem, isEmpty } from '@/utils';
import './index.scss';
import Price from '@/components/price';
import selfSupport from '@/assets/self-support.png';
import { RightOutline } from 'antd-mobile-icons';
import ListView from '@/components/list';
import { useAppSelector, useAppDispatch } from '@/store';
import { updateAddressShowModel } from '@/store/actions';
import {
    updateSkuChooseVisible
} from '@/store/reducers/skuReducers';
import { GoodsInfoType } from '@/components/sku/typing';
import AddressModel from './Address/AddressModel';
import SkuModel from './Sku/SkuModel';
import { GoodsBuyType } from './context';

export interface BuyAreaProps {
    goodsInfo: GoodsInfoType;
    serviceTags?: Array<{
        name: string;
        icon: string;
    }>;
    bannerHeight?: number;
    unit?: string;
    handlerBuy?: (value: GoodsBuyType) => void;
}

const defaultProps = {
    unit: '个',
    bannerHeight: 375,
}


const BuyArea: React.FC<BuyAreaProps> = (props) => {
    const { goodsInfo, unit, bannerHeight, handlerBuy } =
    {
        ...defaultProps,
        ...props
    };

    const { goodsImgs, goodsName, goodsPrice } = goodsInfo;
    const dispatch = useAppDispatch();

    const showAddressModel = useAppSelector(state => state.address.showAddressModel);
    const selectedAddress = useAppSelector(state => state.address.selectedAddress);

    const skuChooseVisible = useAppSelector(state => state.sku.skuChooseVisible);
    const selectedSku = useAppSelector(state => state.sku.selectedSku);

    const b = bem('gd');

    const handlerShowSkuChoose = () => {
        dispatch(updateSkuChooseVisible(!skuChooseVisible));
    }

    const handlerShowAddressModel = () => {
        dispatch(updateAddressShowModel(!showAddressModel));
    }

    const selectTitle = (title: string) => {
        return (
            <h3 className={b('sku-choose-select')}>
                {title}
            </h3>
        )
    }

    const getChooseSku = (): string => {
        if (isEmpty(selectedSku)) return '';
        const chooseTitle = selectedSku?.selectedProps?.map(item => item.name).join('，');
        return chooseTitle + '，' + selectedSku?.quantity + unit;
    }

    const getGoodsImage = (imgs: string[]) => {
        if (isEmpty(imgs)) {
            return (
                <Swiper>
                    <Swiper.Item>
                        <Image src={''} alt={''} height={bannerHeight} />
                    </Swiper.Item>
                </Swiper>
            );
        } else {
            return (
                <Swiper>
                    {
                        imgs?.map((item, index) => (
                            <Swiper.Item key={index}>
                                <Image src={item} alt={''} height={bannerHeight} />
                            </Swiper.Item>
                        ))
                    }
                </Swiper>
            );
        }
    }

    return (
        <>
            <div className={b('swiper')}>
                {
                    getGoodsImage(goodsImgs)
                }
            </div>

            <div className={b('buy-area')}>
                <div className={b('price-warp')}>
                    <div className={b('price')}>
                        <Price
                            price={goodsPrice || 0}
                            size='xlarge'
                            thousands
                            centYuan />
                    </div>
                    <div className={b('price_tag')}></div>
                </div>

                <div className={b('buy-info')}>
                    <h1 className={b('buy-info-name')}>
                        <div className={b('buy-info-name__text')}>
                            <span >
                                <i className={b('buy-info-name__tag')}>
                                    <img src={selfSupport}></img>
                                </i>
                                {goodsName}
                            </span>
                        </div>
                    </h1>
                </div>


                <div className={b('buy-fav')}></div>
            </div>

            <div className={b('h')}></div>
            <div className={b('sku-choose')}>
                <ListView bgColor='none'>
                    <ListView.Item
                        left={selectTitle('已选')}
                        right={<RightOutline />}
                        onHandlerClick={handlerShowSkuChoose}
                    >
                        <span className={b('sku-choose-title')}>
                            {getChooseSku()}
                        </span>
                    </ListView.Item>

                    <ListView.Item
                        left={selectTitle('送至')}
                        right={<RightOutline />}
                        onHandlerClick={handlerShowAddressModel}
                    >
                        <span className={b('sku-choose-title')}>{selectedAddress?.addressDetail}</span>
                        <div className={b('sku-choose-notice')}>
                            现货
                        </div>
                    </ListView.Item>

                    <ListView.Item
                        left={selectTitle('运费')}
                        right={<div></div>}
                    >
                        <span className={b('sku-choose-title')}>包邮（请以提交订单时为准）</span>
                    </ListView.Item>
                </ListView>
            </div>

            <div className='seal-gd-service'>
                <ul className='seal-gd-service-ul'>
                    <li className='seal-gd-service-ul__item'>7天无理由退货</li>
                    <li className='seal-gd-service-ul__item'>今日达</li>
                    <li className='seal-gd-service-ul__item'>今日达</li>
                </ul>

                <div className='seal-gd-service-more'>
                    <RightOutline />
                </div>
            </div>

            <div className={b('sku-window')}>
                {
                    goodsInfo.sku && <SkuModel goodsInfo={goodsInfo} handlerBuy={handlerBuy} />
                }
            </div>

            <div className={b('address-window')}>
                {
                    <AddressModel />
                }
            </div>
        </>
    );
}

export default BuyArea;